<template>
  <div style="margin-bottom:10px">
    From
    <el-select style="width:300px" v-model="emitValue" filterable clearable placeholder="Select From Address">
      <el-option v-for="item in emailFromIdList" :key="item.id" :label="item.username" :value="item.id">
      </el-option>
    </el-select>
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      emailFromIdList: []
    }
  },
  created () {
    this.getSmtpItems()
  },
  computed: {
    emitValue: {
      get () {
        return this.value
      },
      set (newval) {
       this.$emit('input',newval)
      }
    }
  },
  watch: {
    emitValue (val) {
      if (this.emailFromIdList.every(i => i.id !== val)) {
        this.emitValue = ''
      }
    }
  },
  methods: {
    getSmtpItems () {
      this.loading = true
      this.$interface.reports.getSmtpItems().then(({ data: res }) => {
        if (res.code !== 0) {
          this.$message.error(res.msg)
        }
        this.emailFromIdList = res.data
        if(this.emailFromIdList.every(i=>i.id!==this.emitValue)) {
          this.emitValue = ''
        }
      }).catch(() => {
        this.loading = false
      })
    },
  }
}
</script>
<style scoped lang='scss'>
::v-deep .el-input__inner {
  border: 0;
}
</style>